<html>
<head></head>
<body>
  Analytics Feed URL
  <input type="text" value="http://pipes.yahoo.com/pipes/pipe.run?_id=641d127f63df1a29127d53385132782d&_render=json&_callback=feedToGraph.topcontentCallback" size="150"><br/>
  <input type="button" value="submit" onclick="feedToGraph.addFeed();">
  <div id="graph"></div>
  <script type="text/javascript">
  
  var feedToGraph = {
    maxDataPoint : 0,
    graphDataNames : [],
    graphData : [],
    dataObject : null,
    addFeed: function() {

      var newScript = document.createElement('script');
      newScript.src = 'http://pipes.yahoo.com/pipes/pipe.run?_id=641d127f63df1a29127d53385132782d&_render=json&_callback=feedToGraph.topcontentCallback';

      document.body.appendChild(newScript);
    },
    storeData: function(obj, columnToDisplay, graphType) {
      for (var i=0; i < 5; i++) {
        var regex = /\/apis\/ajaxsearch\/(.*)/;
        var relaURL = obj.value.items[i].Key.match(regex)[1];
        var pageViews = obj.value.items[i].Cell[columnToDisplay].Primary;


        pageViews = parseFloat(pageViews.replace(',',''));
        if(parseFloat(pageViews) > maxDataPoint) {
          maxDataPoint = pageViews;
        }

        graphType == 0 ? graphDataNames.unshift(relaURL) : graphDataNames.push(relaURL);
        console.log(pageViews);
        graphData.push(pageViews);
      }
    },
    setMaxPoint : function() {
      var numDivisions = 0;
      while(maxDataPoint > 100) {
        maxDataPoint = maxDataPoint / 10;
        numDivisions++;
      }
      maxDataPoint = Math.floor((maxDataPoint+1));
      while(numDivisions > 0) {
        maxDataPoint = maxDataPoint * (10);
        numDivisions--;
      }
    }, 
    setDataPoints : function() {
      for (var i=0; i < graphData.length; i++) {
        graphData[i] = Math.floor(100*graphData[i] / maxDataPoint);
      }
      return(graphData);
    }, 
    topcontentCallback: function(obj) {
      var html = '<select id="dataColumn" onchange="feedToGraph.changeGraph();">';
      html += '<option value=0>Page Views</option>';
      html += '<option value=1>Unique Page Views</option>';
      html += '</select>';
      html += '<select id="graphType" onchange="feedToGraph.changeGraph();">';
      html += '<option value=0>Bar (horizontal)</option>';
      html += '<option value=1>Pie</option>';
      html += '</select>';
      html += '<div id="popularPosts">';
      html += '</div>';
      document.getElementById('graph').innerHTML = html;
      dataObject = obj;
      this.resetData();
      this.insertGraph(0, 0);
    },
    insertGraph: function(dataColumnToDisplay, graphType) {
      this.storeData(dataObject, dataColumnToDisplay, graphType);
      this.setMaxPoint();
      graphData = this.setDataPoints();
      var title = 'AJAX+Search+Pages+';
      title += dataColumnToDisplay == 0 ? '(Page+Views+Today)' : '(Unique+Page+Views+Today)';


      this.sortArrays();


      var graph = document.createElement('img');
      if(graphType == 0) {
        graph.src = "http://www.google.com/chart?cht=bhs&chs=500x160&chd=t:"+graphData.join(',')+"&chco=3072F3&chls=1,3.75,1&chxt=x,y&chxl=1:|"+graphDataNames.join('|')+"&chxr=0,0,"+maxDataPoint+"&chtt="+title+"&chbh=20,2&chg=20,5,5,4";
      } else {
        graph.src = "http://www.google.com/chart?cht=p3&chs=470x150&chd=t:"+graphData.join(',')+"&chco=3072F3&chls=2,4,1&chdl=Data&chxt=x,y&chtt="+title+"&chxl=0:|"+graphDataNames.join('|');
      }

      console.log(graphData);
      console.log(graphDataNames);
      console.log(maxDataPoint);
      console.log(graph.src);


      document.getElementById("popularPosts").appendChild(graph);

    },
    sortArrays: function() {
      var changed = true;
      // simple bubble sort
      while(changed) {
        changed = false;
        for (var i=0; i < graphData.length; i++) {
          if(i != graphData.length-1) {
            if(graphData[i] < graphData[i+1]) {
              var tempData = graphData[i];
              graphData[i] = graphData[i+1];
              graphData[i+1] = tempData;

              var tempData = graphDataNames[i];
              graphDataNames[i] = graphDataNames[i+1];
              graphDataNames[i+1] = tempData;

              changed = true;
            }
          }
        }
      }
    }, 
    resetData: function() {
      maxDataPoint = 0;
      graphDataNames = [];
      graphData = [];
      document.getElementById("popularPosts").innerHTML = '';
    },
    changeGraph: function() {
      var dataColumn = document.getElementById('dataColumn').value;
      var graphType = document.getElementById('graphType').value;

      this.resetData();
      this.insertGraph(dataColumn, graphType);
    } 
  }  
  </script>

</body>
</html>